<script setup lang="ts">
import { useRouter } from 'vue-router'

const props = defineProps<{
    doctors: any[]
}>()

const router = useRouter()

const viewDoctorDetails = (doctorId: number) => {
    router.push(`/doctor/${doctorId}`)
}
</script>

<template>
    <div v-if="doctors.length" class="other-doctors-section">
        <h2 class="section-title">科室其他医生</h2>
        <div class="other-doctors-list">
            <div v-for="doctor in doctors" :key="doctor.id" class="other-doctor-card"
                @click="viewDoctorDetails(doctor.id)">
                <div class="other-doctor-main">
                    <img :src="doctor.avatar" class="other-doctor-avatar" alt="医生头像">
                    <div class="other-doctor-info">
                        <div class="other-doctor-name-title">
                            <span class="other-doctor-name">{{ doctor.name }}</span>
                            <span class="other-doctor-title">{{ doctor.get_title_display }}</span>
                        </div>
                        <div class="other-doctor-hospital">{{ doctor.hospital }}</div>
                        <div class="other-doctor-rating">评分：{{ doctor.rating }}</div>
                    </div>
                </div>
                <div class="other-doctor-price">
                    <button class="other-consult-btn" @click.stop="router.push(`/doctor/${doctor.id}`)">
                        咨询  ¥{{ doctor.consultation_price }}
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.section-title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin: 40px 0 20px;
}

.other-doctors-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.other-doctor-card {
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.3s ease;
}

.other-doctor-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.other-doctor-main {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.other-doctor-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 16px;
}

.other-doctor-info {
    flex: 1;
}

.other-doctor-name-title {
    margin-bottom: 4px;
}

.other-doctor-name {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-right: 8px;
}

.other-doctor-title {
    font-size: 12px;
    color: #666;
}

.other-doctor-hospital {
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
}

.other-doctor-rating {
    font-size: 12px;
    color: #666;
}

.other-doctor-price {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.other-consult-btn {
    background: #00b96b;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 24px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.other-consult-btn:hover {
    background: #009d5d;
}

.price-text {
    font-size: 14px;
    color: #ff4d4f;
    font-weight: 500;
}
</style>